@(resType: String, resourceOpt: Option[Resource])(implicit request: RequestHeader)
@import helper._
@main(s"${app.Global.siteSetting.name} - 创建${_root_.utils.AppUtil.prettyResource(resType)}", "community", resType) {
<link rel="stylesheet" href="/assets/plugins/quill/1.3.6/quill.snow.css">
<link rel="stylesheet" href="/assets/plugins/quill/1.3.6/quill-emoji.css">
<link rel="stylesheet" href="/assets/plugins/quill-mention/quill.mention.min.css">
<style>
/* Set default font-family */
#quill-container {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, "STHeiti Light", Tahoma, Arial, sans-serif;
  font-size: 14px;
  height: 500px;
}
.layui-upload-file, .layui-upload-button { display: none;}

.ql-editor p, .ql-editor ol, .ql-editor ul, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
    margin: 5px 0px 5px;
    padding: 10px 0px 5px;
}
</style>
@nav(resType)
<div class="main layui-clear">
  <div class="fly-panel" pad20 style="padding-top: 5px;">
    <div class="layui-tab layui-tab-brief" lay-filter="user">
      <ul class="layui-tab-title">
        <li class="layui-this">@resourceOpt.map(_ => "编辑帖子").getOrElse("发表新帖")</li>
      </ul>
      <div class="layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
        <div class="layui-tab-item layui-show">
          <div class="layui-form layui-form-pane">
            <div class="layui-form-item">
              <label for="L_title" class="layui-form-label">标题</label>
              <div class="layui-input-block">
                <input id="L_title" type="text" value="@resourceOpt.map(_.title).getOrElse("")" required lay-verify="required" autocomplete="off" class="layui-input"> </div>
            </div>
          </div>
          <div id="quill-container">@Html(resourceOpt.map(_.content.getOrElse("-")).getOrElse(""))</div>
          <div class="layui-form layui-form-pane" style="margin-top: 15px;">
            <form id="form" action="/resource/add" method="post">
              @if(resourceOpt.nonEmpty){
              <input type="hidden" name="_id" value="@resourceOpt.get._id"/>
              }
              <input id="L_title_hidden" type="hidden" name="title" value="@resourceOpt.map(_.title).getOrElse("")"/>
              <input id="L_content" type="hidden" name="content"/>
              <div class="layui-form-item">
                <label for="L_title" class="layui-form-label">关键词</label>
                <div class="layui-input-block">
                  <input name="keywords" value="@resourceOpt.map(_.keywords).getOrElse("")" autocomplete="off" class="layui-input" placeholder="关键词之间以英文逗号分隔"> </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">所在类别</label>
                  <div class="layui-input-inline" style="width: 300px;">
                    <input id="categoryName" type="text" autocomplete="off" class="layui-input" readonly>
                    <input id="categoryPath" type="hidden" name="categoryPath" value='@{resourceOpt.map(_.categoryPath).getOrElse("")}'>
                  </div>
                  <div class="layui-input-inline" style="width: 100px;">
                    <button id="category-btn" class="layui-btn" type="button">选择分类</button>
                  </div>
                </div>
              </div>
              <div class="layui-form-item">
                <input type="hidden" name="resType" value="@resType">
                <input type="file" name="file" id="LAY-upload-image" data-token="" class="layui-upload-file">
                <button id="submit-btn" class="layui-btn" lay-submit>立即发布</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
}

<script type="text/javascript" src="/assets/plugins/quill/1.3.6/quill.min.js"></script>
<script type="text/javascript" src="/assets/plugins/quill/1.3.6/quill-emoji.js"></script>
<script type="text/javascript" src="/assets/plugins/quill-blot-formatter/quill-blot-formatter.min.js"></script>
<script type="text/javascript" src="/assets/plugins/quill-mention/quill.mention.min.js"></script>
<script>
layui.cache.page = 'jie';
var token = '';

Quill.register('modules/blotFormatter', QuillBlotFormatter.default);

async function findUsers(searchTerm) {
  return new Promise(function(resolve, reject) {
    $.get("/user/find?searchTerm=" + searchTerm, function(resp){
      if(resp.code == 0){
        resolve(resp.data);
      } else {
        reject(new Error("error"));
      }
    });
  });
}

var quill = new Quill('#quill-container', {
  theme: 'snow',
  modules: {
    toolbar: {
      container : [
        [{ 'size': [] }],
        [ 'bold', 'italic', 'underline', 'strike' ],
        [{ 'color': [] }, { 'background': [] }],
        [{ 'script': 'super' }, { 'script': 'sub' }],
        [{ 'header': 1 }, { 'header': 2 }, { 'header': [1, 2, 3, 4, 5, 6, false] }],
        ['blockquote', 'code-block' ],
        [{ 'list': 'ordered' }, { 'list': 'bullet'}, { 'indent': '-1' }, { 'indent': '+1' }],
        [ 'direction', { 'align': [] }],
        [ 'link', 'image', 'video' ],
        ['emoji'],
        [ 'clean' ]
      ],
      handlers: {
        image: function(){ $('#LAY-upload-image').click(); },
        'emoji': function () {}
      }
    },
    "emoji-toolbar": true,
    "emoji-shortname": true,
    "emoji-textarea": false,
    blotFormatter: {},
    mention: {
      allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
      mentionDenotationChars: ["@@", "#"],
      dataAttributes: ['data'],
      spaceAfterInsert: true,
      source: async function (searchTerm, renderList) {
        const matchedPeople = await findUsers(searchTerm);
        renderList(matchedPeople);
      }
    }
  }
});

$('#form').submit(function(){
  $('#submit-btn').prop("disabled", true);
  $('#submit-btn').addClass("layui-btn-disabled");
  $('#L_title_hidden').val($('#L_title').val());
  $('#L_content').val(quill.root.innerHTML);
});

layui.use('upload', function(upload){
  var upload = layui.upload;
  upload.render({
    elem: '#LAY-upload-image'
    ,method: 'post'
    ,url: '/resource/owner/editor'
    ,done: function(res){
      var range = quill.getSelection(true);
      var Delta = Quill.import('delta');
      quill.updateContents(
        new Delta().retain(range.index)
           .delete(range.length)
           .insert({ image: res.url })
        , 'user');
    }
    ,error: function(){
      layer.msg('error');
    }
  });
});

var defaultSelected = '@resourceOpt.map(_.categoryPath).getOrElse("")';
$('#category-btn').click(function(){
    CommonUtil.chooseCategory(defaultSelected, function(data){
      defaultSelected = data.path;
      $('#categoryPath').val(data.path);
      $('#categoryName').val(data.name);
    });
  });

@if(resourceOpt.nonEmpty){
$.get("/board/path/name?path=@{resourceOpt.get.categoryPath}", function(data){
    $('#categoryName').val(data);
});
}
</script>
